<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image src="../../static/image/logo-login.png" style="width: 260rpx;height: 88rpx;" mode="aspectFill"></image>
		<!-- 标题 -->
		<view class="t-b2">欢迎注册</view>
		<view class="t-b2-tips">已有账号？<text style="color: #F24646" @click="toReg">立即登录</text></view>
		<form class="cl">
			<view class="t-a" style="margin-bottom: 50rpx;">
				<image src="/static/image/sj.png"></image>
				<input type="number" name="mobile" placeholder="请输入手机号" maxlength="11" v-model="mobile" />
			</view>
			<view class="t-a" style="margin-bottom: 50rpx;">
				<image src="/static/image/yz.png"></image>
				<input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="yzm" />
				<view v-if="showText" class="t-c" @tap="getCode()">获取验证码</view>
				<view v-else class="t-c" style="color: #A7A7A7;">重新发送({{ second }})</view>
			</view>
			<view class="t-a">
				<image src="/static/image/yz.png"></image>
				<input type="text" name="referralCode" placeholder="请输入邀请码" v-model="referralCode" />
			</view>
			
			<view class="u-f-justify u-font-24" style="margin-top: 100rpx;">
				<u-checkbox v-model="checked" shape="circle" active-color="#F24646">
					<view class="u-font-24">我已阅读并同意<text style="color: #F24646"
							@click.stop="toArticle(69)">《用户协议》</text>与<text style="color: #F24646"
							@click.stop="toArticle(70)">《隐私政策》</text></view>
				</u-checkbox>
			</view>
			
			<button class="loginbtn" @tap="login()">注 册</button>
			<view class="u-f-justify mt15" style="color: #F24646" @click="toIndex">返回首页</view>
		</form>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				is_audit: false,
				second: 60, //默认60秒
				showText: true, //判断短信是否发送
				mobile: '', //手机号码
				yzm: '', //验证码
				code: '',
				isParty: false,
				referralCode:'',
				partyData: {},
				checked: false,
				disabledCode:false,
				tabIndex: 0,
				password: ''
			};
		},
		async onLoad() {
		},
		methods: {
			toIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			toReg(){
				uni.redirectTo({
					url:'/pages/login/index'
				})
			},
			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					});
				} else {
					uni.navigateTo({
						url: 'pages/index/index'
					})
				}
			},
			//当前登录按钮操作
			login() {
				var that = this;
				
				if (!that.checked) {
					uni.showToast({
						title: '请勾选用户协议与隐私政策',
						icon: 'none'
					});
					return;
				}
				if (!that.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(that.mobile)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return;
				}
				if (!that.yzm) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				// 请求登录
				that.$api.verifyRegister({
					username:that.mobile,
					code:that.yzm,
					referralCode:that.referralCode
				},res=>{
					if(res.code==200){
						this.$common.successToShow('注册成功', ress => {
							
								that.$db.set('userToken',res.data.token);
								
							uni.navigateBack()
						})
						
					}else{
						that.$common.errorToShow(res.message || res.data)
					}
				})
			},
			//获取短信验证码
			getCode() {
				var that = this;
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^[1][2,3,4,5,6,7,8,9][0-9]{9}$/.test(this.mobile)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return;
				}
				if(that.disabledCode){
					return
				}
				that.disabledCode=true
				//这里请求后台获取短信验证码
				this.$api.verifySendCode({
					account:this.mobile,
					methodType:'get',
					type:'mobile'
				},res=>{
					if(res.code==200){
						this.$common.errorToShow('发送成功')
						var interval = setInterval(() => {
							this.showText = false;
							var times = this.second - 1;
							this.second = times;
						}, 1000);
						setTimeout(() => {
							clearInterval(interval);
							this.second = 60;
							this.showText = true;
						}, 60000);
					}else{
						that.disabledCode=false
						this.$common.errorToShow(res.msg)
					}
				})
				
			},
			// 用户协议，隐私政策
			toArticle(id) {
				uni.navigateTo({
					url:'/pages/single/single?id='+id
				})
			},
			
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
		z-index: -1;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		z-index: -1;
		/* margin-bottom: -200rpx; */
	}

	.t-login {
		width: 650rpx;
		margin: 140rpx auto;
		font-size: 28rpx;
		color: #000;
	}

	.t-login .loginbtn {
		font-size: 28rpx;
		background: #F24646;
		color: #fff;
		height:80rpx;
		margin-top: 20rpx;
		line-height: 80rpx;
		border-radius: 5rpx;
		// box-shadow: 0 5px 7px 0 #0CA43C;
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #F8F8F8;
		font-size: 28rpx;
		border-radius: 5rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		/* border-right: 2rpx solid #dedede; */
		margin-right: 20rpx;
	}

	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 200rpx 0 30rpx 0;
		font-weight: bold;
	}

	.t-login .t-b2 {
		text-align: left;
		font-size: 40rpx;
		color: #333333;
		margin-top: 48rpx;
	}

	.t-login .t-b2-tips {
		text-align: left;
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #666666;
		padding: 0rpx 0 100rpx 0;
	}
	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		/* background: #F6C000; */
		color: #F24646;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
		z-index: 999;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 40rpx auto 0;
	}

	.t-login .t-e image {
		width: 70rpx;
		height:70rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #aaa;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	.wechat-auth {
		width: 320rpx;
		margin: 200rpx auto 0 auto;

		.wechat-auth-container {
			display: flex;
			justify-content: center;
		}

		.icon {
			width: 38rpx;
			height: 38rpx;
			margin-right: 15rpx;
		}

		.title {
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>